<template>
	<view class="goods-detail">
		<!-- 自定义导航栏 - 小程序适配版本 -->
		<view class="custom-navbar" :style="navbarStyle">
			<view class="navbar-content" :style="navbarContentStyle">
				<view class="back-btn" @tap.stop="goBack">
					<u-icon name="arrow-left" size="20" color="#fff"></u-icon>
				</view>
				<view class="navbar-title">
					<text class="title-text">商品详情</text>
				</view>
			</view>
		</view>
		
		<!-- 导航标签栏 -->
		<view class="nav-tabs-bar" :style="{ top: (statusBarHeight + navBarHeight) + 'px' }">
			<view class="nav-tab" :class="{ active: activeNavTab === index }" v-for="(tab, index) in navTabs"
				:key="index" @click="switchNavTab(index)">
				<text class="tab-text">{{ tab }}</text>
			</view>
		</view>

		<!-- 商品内容区域 -->
		<view class="content-container" :style="{ marginTop: ((statusBarHeight + navBarHeight) * 2 + 88) + 'rpx' }">
			<!-- 商品轮播图 -->
			<view class="goods-swiper" v-show="activeNavTab === 0">
				<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="500"
					@change="onSwiperChange">
					<!-- 视频播放 -->
					<swiper-item v-if="goodsInfo.video">
						<view class="video-container">
							<video :src="baseUrl + goodsInfo.video" class="goods-video" controls
								:show-center-play-btn="true" :show-play-btn="true"></video>
						</view>
					</swiper-item>
					<!-- 商品图片 -->
					<swiper-item v-for="(image, index) in goodsInfo.images" :key="index">
						<image :src="baseUrl + image" class="swiper-image" mode="aspectFill"
							@click="previewImage(index)"></image>
					</swiper-item>
				</swiper>
				<view class="image-count">
					<text class="count-text">{{ currentImageIndex + 1 }}/{{ totalMediaCount }}</text>
				</view>
			</view>

			<!-- 商品基本信息 (仅在商品tab显示) -->
			<view v-show="activeNavTab === 0">
				<!-- 商品基本信息 -->
				<view class="goods-info">
					<view class="title-section">
						<text class="goods-title">{{ goodsInfo.title }}</text>
						<view class="title-actions">
							<!-- <view class="action-item" @click="shareGoods">
								<u-icon name="share" color="#999" size="20"></u-icon>
							</view> -->
						</view>
					</view>

					<view class="price-section">
						<view class="price-row">
							<view class="current-price">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ goodsInfo.salePrice }}</text>
							</view>
						</view>
						<view class="original-price" v-if="goodsInfo.marketPrice">
							<text class="original-text">¥{{ goodsInfo.marketPrice }}</text>
						</view>
						<view class="hand-price" v-if="goodsInfo.handPrice">
							<text class="hand-price-text">到手价：¥{{ goodsInfo.handPrice }}</text>
						</view>
						<view class="express-row">
							<text class="express-text">快递:{{ goodsInfo.express || 0 }}</text>
							<text class="location-text">{{ goodsInfo.location }}</text>
						</view>
					</view>
				</view>

				<!-- 七天无理由退款 -->
				<view class="service-guarantee" v-if="showServiceGuarantee" @click="showServiceDetail">
					<view class="guarantee-box">
						<image :src="serverAddress + 'img/icon-Right@3x.png'" class="guarantee-img"></image>
						<text class="guarantee-text">七天无理由退款</text>
					</view>

					<!-- <u-icon name="arrow-right" size="14" color="#999"></u-icon> -->
				</view>

				<!-- 分润信息 -->
				<view class="profit-section">
					<view class="profit-item">
						<view class="profit-label">
							<text class="label-text">会员</text>
						</view>
						<view class="profit-desc">
							<text class="desc-text">消费可分润</text>
							<text class="profit-amount">¥{{ goodsInfo.memberProfit || 0 }}</text>
						</view>
					</view>

					<view class="profit-item">
						<view class="profit-label">
							<text class="label-text">云主</text>
						</view>
						<view class="profit-desc">
							<text class="desc-text">消费可分润</text>
							<text class="profit-amount">¥{{ goodsInfo.seniorProfit || 0 }}</text>
							<view class="apply-btn" v-if="!userInfo.isStaff" @click="applyStaff">
								<text class="apply-text">申请</text>
							</view>
						</view>
					</view>

					<view class="profit-item">
						<view class="profit-label">
							<text class="label-text">合伙人</text>
						</view>
						<view class="profit-desc">
							<text class="desc-text">消费可分润</text>
							<text class="profit-amount">¥{{ goodsInfo.partnerProfit || 0 }}</text>
							<view class="apply-btn" v-if="!userInfo.isPartner" @click="applyPartner">
								<text class="apply-text">申请</text>
							</view>
						</view>
					</view>

					<view class="profit-recommend">
						<text class="recommend-text">邀请他人消费购买此商品可分润 </text>
						<text class="recommend-amount">¥{{ goodsInfo.recommendProfit || 0 }}</text>
					</view>
				</view>

				<!-- 规格选择 -->
				<view class="spec-section" @click="showSpecPopup">
					<view class="spec-header">
						<view class="spec-left">
							<text class="header-title">规格:</text>
							<text class="selected-text">{{ selectedSpecText || '' }}</text>
						</view>
						<u-icon name="arrow-right" size="14" color="#999"></u-icon>
					</view>
				</view>

				<!-- 产品参数 -->
				<view class="param-section" @click="showParamPopup">
					<text class="param-text">产品参数</text>
					<u-icon name="arrow-right" size="14" color="#999"></u-icon>
				</view>

				<!-- 商品评价入口 -->
				<view class="comment-entry" @click="switchNavTab(2)">
					<text class="entry-text">商品评价({{ totalComments }})</text>
					<u-icon name="arrow-right" size="14" color="#999"></u-icon>
				</view>

				<!-- 商品评价预览 -->
				<view class="comment-preview" v-if="commentPreview.length">
					<view class="comment-header">
						<text class="header-title">商品评价({{ totalComments }})</text>
					</view>

					<view class="comment-tags" v-if="commentTags.length">
						<view class="comment-tag" v-for="tag in commentTags" :key="tag.name">
							<text class="tag-text">{{ tag.name }}({{ tag.count }})</text>
						</view>
					</view>

					<view class="comment-list">
						<view class="comment-item" v-for="comment in commentPreview" :key="comment.id">
							<view class="comment-user">
								<image :src="comment.avatar || '/static/default-avatar.png'" class="user-avatar">
								</image>
								<text class="user-name">{{ comment.nickname }}</text>
								<view class="comment-rating">
									<view class="star" v-for="n in 5" :key="n" :class="{ active: n <= comment.rating }">
									</view>
								</view>
							</view>
							<view class="comment-content">
								<text class="comment-text">{{ comment.content }}</text>
							</view>
							<view class="comment-spec" v-if="comment.spec">
								<text class="spec-text">{{ comment.spec }}</text>
							</view>
							<view class="comment-images" v-if="comment.images && comment.images.length">
								<image v-for="(img, index) in comment.images" :key="index" :src="baseUrl + img"
									class="comment-image" @click="previewCommentImage(comment.images, index)"></image>
							</view>
							<view class="seller-reply" v-if="comment.reply">
								<view class="reply-triangle"></view>
								<text class="reply-text">商家回复：{{ comment.reply }}</text>
							</view>
						</view>
					</view>

					<view class="see-all-comments" @click="switchNavTab(2)">
						<text class="see-all-text">查看全部评论</text>
					</view>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="detail-content" v-show="activeNavTab === 1">
				<view class="detail-wrapper">
					<rich-text :nodes="goodsInfo.detail" v-if="goodsInfo.detail"></rich-text>
					<view class="no-detail" v-else>
						<text class="no-detail-text">暂无商品详情</text>
					</view>
				</view>
			</view>

			<!-- 评价列表 -->
			<view class="comments-content" v-show="activeNavTab === 2">
				<view class="comment-tabs">
					<view class="comment-tab" :class="{ active: activeCommentTab === index }"
						v-for="(tab, index) in commentTabs" :key="index" @click="switchCommentTab(index)">
						<text class="tab-text">{{ tab.name }}({{ tab.count }})</text>
					</view>
				</view>

				<scroll-view class="comment-scroll" scroll-y @scrolltolower="loadMoreComments" :refresher-enabled="true"
					:refresher-triggered="refreshing" @refresherrefresh="refreshComments">
					<view class="comment-list" v-if="currentComments.length">
						<view class="comment-item" v-for="comment in currentComments" :key="comment.id">
							<view class="comment-user">
								<image :src="comment.avatar || '/static/default-avatar.png'" class="user-avatar">
								</image>
								<text class="user-name">{{ comment.nickname }}</text>
								<view class="comment-rating">
									<view class="star" v-for="n in 5" :key="n" :class="{ active: n <= comment.rating }">
									</view>
								</view>
							</view>
							<view class="comment-content">
								<text class="comment-text">{{ comment.content }}</text>
							</view>
							<view class="comment-spec" v-if="comment.spec">
								<text class="spec-text">{{ comment.spec }}</text>
							</view>
							<view class="comment-images" v-if="comment.images && comment.images.length">
								<image v-for="(img, index) in comment.images" :key="index" :src="baseUrl + img"
									class="comment-image" @click="previewCommentImage(comment.images, index)"></image>
							</view>
							<view class="seller-reply" v-if="comment.reply">
								<view class="reply-triangle"></view>
								<text class="reply-text">商家回复：{{ comment.reply }}</text>
							</view>
						</view>
					</view>

					<view class="no-data" v-else>
						<image src="/static/no-data.png" class="no-data-img"></image>
						<text class="no-data-text">暂无该评论</text>
					</view>

					<view class="load-more" v-if="hasMoreComments">
						<text class="load-text">加载更多...</text>
					</view>
				</scroll-view>
			</view>

			<!-- 分润详情 -->
			<view class="profit-detail" v-show="activeNavTab === 3">
				<view class="profit-section">
					<view class="profit-item">
						<view class="profit-label">
							<text class="label-text">会员</text>
						</view>
						<view class="profit-desc">
							<text class="desc-text">消费可分润</text>
							<text class="profit-amount">¥{{ goodsInfo.memberProfit || 0 }}</text>
						</view>
					</view>

					<view class="profit-item">
						<view class="profit-label">
							<text class="label-text">云主</text>
						</view>
						<view class="profit-desc">
							<text class="desc-text">消费可分润</text>
							<text class="profit-amount">¥{{ goodsInfo.seniorProfit || 0 }}</text>
							<view class="apply-btn" v-if="!userInfo.isStaff" @click="applyStaff">
								<text class="apply-text">申请</text>
							</view>
						</view>
					</view>

					<view class="profit-item">
						<view class="profit-label">
							<text class="label-text">合伙人</text>
						</view>
						<view class="profit-desc">
							<text class="desc-text">消费可分润</text>
							<text class="profit-amount">¥{{ goodsInfo.partnerProfit || 0 }}</text>
							<view class="apply-btn" v-if="!userInfo.isPartner" @click="applyPartner">
								<text class="apply-text">申请</text>
							</view>
						</view>
					</view>

					<view class="profit-recommend">
						<text class="recommend-text">邀请他人消费购买此商品可分润</text>
						<text class="recommend-amount">¥{{ goodsInfo.recommendProfit || 0 }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<view class="action-left">
				<view class="action-item" @click="goHome">
					<u-icon name="home" size="24" color="#666"></u-icon>
					<text class="action-text">首页</text>
				</view>
				<view class="action-item" @click="openCustomerService">
					<u-icon name="chat" size="24" color="#666"></u-icon>
					<text class="action-text">客服</text>
				</view>
				<view class="action-item" @click="goCart">
					<u-icon name="shopping-cart" size="24" color="#666"></u-icon>
					<text class="action-text">购物车</text>
					<view class="cart-badge" v-if="cartCount > 0">
						<text class="badge-text">{{ cartCount > 99 ? '99+' : cartCount }}</text>
					</view>
				</view>
			</view>
			<view class="action-right">
				<button class="add-cart-btn" @click="addToCart">
					<text class="btn-text">加入购物车</text>
				</button>
				<button class="buy-now-btn" @click="buyNow">
					<text class="btn-text">立即购买</text>
				</button>
			</view>
		</view>

		<!-- 规格选择弹窗 -->
		<u-popup v-model:show="showSpec" mode="bottom" border-radius="20" :safe-area-inset-bottom="true">
			<view class="spec-popup">
				<view class="popup-header">
					<view class="goods-brief">
						<image :src="baseUrl + goodsInfo.images[0]" class="brief-image" v-if="goodsInfo.images.length">
						</image>
						<view class="brief-info">
							<text class="brief-price">¥{{ selectedSpec.price || goodsInfo.salePrice }}</text>
							<text class="brief-stock">库存 {{ goodsInfo.stock }} 件</text>
							<text class="brief-spec">请选择 尺码 颜色分类</text>
						</view>
					</view>
					<view class="close-btn" @click="hideSpecPopup">
						<u-icon name="close" size="20" color="#999"></u-icon>
					</view>
				</view>
						<!-- ... -->

				<view class="spec-content">
					<view class="spec-group" v-for="spec in goodsInfo.specs" :key="spec.attr_name">
						<text class="spec-name">{{ spec.attr_name }}</text>
						<view class="spec-options">
							<view class="spec-option"
								:class="{ active: selectedSpecs[spec.attr_name] === option.option_name, disabled: !option.is_default }"
								v-for="option in spec.attr_value" :key="option.option_name"
								@click="selectSpec(spec.attr_name, option)">
								<text class="option-text">{{ option.option_name }}</text>
							</view>
						</view>
					</view>

					<view class="quantity-section">
						<text class="quantity-label">购买数量</text>
						<view class="quantity-control">
							<view class="quantity-btn" :class="{ disabled: quantity <= 1 }" @click="decreaseQuantity">
								<u-icon name="minus" size="14" color="#999"></u-icon>
							</view>
							<input class="quantity-input" v-model="quantity" type="number" @blur="checkQuantity" />
							<view class="quantity-btn" @click="increaseQuantity">
								<u-icon name="plus" size="14" color="#999"></u-icon>
							</view>
						</view>
					</view>
				</view>

				<view class="popup-actions">
					<button class="popup-btn add-cart" @click="confirmAddToCart">
						<text class="btn-text">加入购物车</text>
					</button>
					<button class="popup-btn buy-now" @click="confirmBuyNow">
						<text class="btn-text">立即购买</text>
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import api from '@/api/index.js'
import {
	getToken,
	requireLogin
} from '@/api/auth.js'
import {
	inject
} from 'vue'

export default {
	data() {
		return {
			// 小程序适配相关
			statusBarHeight: 0,
			navBarHeight: 44,
			menuButtonInfo: {
				width: 0,
				height: 0,
				top: 0,
				right: 0,
				bottom: 0,
				left: 0
			},
			windowWidth: 375,
			// 原有数据
			imgUrl: inject('$imgUrl'),
			baseUrl: inject('$baseUrl'),
			serverAddress: inject('$serverAddress', ''),
			goodsId: '',
			currentImageIndex: 0,
			activeNavTab: 0,
			navTabs: ['商品', '详情', '评价', '分润'],
			showSpec: false,
			isFavorite: false,
			cartCount: 0,
			quantity: 1,
			selectedSpecs: {},
			selectedSpecId: '',
			maxStock: 0,
			loading: false,
			isOnSale: true,
			showServiceGuarantee: true,
			activeCommentTab: 0,
			refreshing: false,
			hasMoreComments: false,
			commentPage: 1,
			totalComments: 0,
			commentPreview: [],
			commentTags: [],
			currentComments: [],
			commentTabs: [{
				name: '全部',
				count: 0
			},
			{
				name: '好评',
				count: 0
			},
			{
				name: '中评',
				count: 0
			},
			{
				name: '差评',
				count: 0
			},
			{
				name: '有图',
				count: 0
			}
			],
			userInfo: {
				isPartner: false,
				isStaff: false
			},
			goodsInfo: {
				id: '',
				title: '',
				subtitle: '',
				price: '0.00',
				salePrice: '0.00',
				marketPrice: '',
				handPrice: '',
				originalPrice: '',
				discount: '',
				salesCount: 0,
				monthlySales: 0,
				stock: 0,
				rating: 0,
				images: [],
				video: '',
				tags: [],
				detail: '',
				detailUrl: '',
				params: [],
				specs: [],
				storeType: '',
				express: '',
				location: '',
				memberProfit: 0,
				seniorProfit: 0,
				partnerProfit: 0,
				recommendProfit: 0,
				userIdentity: {}
			}
		}
	},

	computed: {
		navbarStyle() {
			return {
				paddingTop: this.statusBarHeight + 'px'
			}
		},
		navbarContentStyle() {
			const paddingRight = (this.menuButtonInfo.width || 0) + (this.menuButtonInfo.right || 0) - this.windowWidth + 10
			return {
				height: this.navBarHeight + 'px',
				paddingRight: paddingRight + 'px'
			}
		},
		selectedSpecText() {
			const specs = Object.values(this.selectedSpecs).filter(Boolean)
			return specs.length ? specs.join(' ') : ''
		},

		selectedSpec() {
			return {
				price: this.goodsInfo.salePrice,
				stock: this.goodsInfo.stock
			}
		},

		totalMediaCount() {
			let count = this.goodsInfo.images.length
			if (this.goodsInfo.video) count += 1
			return count
		}
	},

	onLoad(options) {
		this.initMiniProgramAdapt()
		console.log('页面加载参数:', options)
		console.log('初始activeNavTab:', this.activeNavTab)
		if (options.id || options.goodsid) {
			this.goodsId = options.id || options.goodsid
			this.loadGoodsDetail()
			// this.loadCartCount()
			this.checkFavoriteStatus()
			this.loadUserIdentity()
			// this.getUserInfo()
		}
	},

	methods: {
		// 小程序适配初始化
		initMiniProgramAdapt() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0
			this.windowWidth = systemInfo.windowWidth || 375

			// 获取胶囊按钮信息（仅小程序）
			// #ifdef MP
			try {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() || {
					width: 87,
					height: 32,
					top: this.statusBarHeight + 6,
					right: 7,
					bottom: this.statusBarHeight + 38,
					left: this.windowWidth - 94
				}
				this.navBarHeight = this.menuButtonInfo.height + (this.menuButtonInfo.top - this.statusBarHeight) * 2
			} catch (e) {
				console.error('获取胶囊按钮信息失败:', e)
				this.menuButtonInfo = {
					width: 87,
					height: 32,
					top: this.statusBarHeight + 6,
					right: 7,
					bottom: this.statusBarHeight + 38,
					left: this.windowWidth - 94
				}
				this.navBarHeight = 44
			}
			// #endif

			// #ifndef MP
			this.menuButtonInfo = {
				width: 0,
				height: 0,
				top: 0,
				right: 0,
				bottom: 0,
				left: 0
			}
			// #endif
		},
		
		// 加载商品详情
		async loadGoodsDetail() {
			try {
				uni.showLoading({
					title: '加载中...'
				})

				const result = await api.goodsApi.getGoodsDetail({
					goods_id: this.goodsId
				})

				uni.hideLoading()

				if (result.r === 0) {
					const data = result.data.goods
					this.goodsInfo = {
						id: data.goods_id,
						title: data.goods_name,
						images: data.imgurl || [],
						price: data.sale_price,
						salePrice: data.sale_price,
						marketPrice: data.market_price,
						handPrice: data.hand_price,
						originalPrice: data.market_price,
						subtitle: data.goods_brief,
						tags: data.goods_tags || [],
						salesCount: data.sales_count || 0,
						monthlySales: data.ysales || 0,
						stock: data.stock || data.goods_number || 0,
						rating: data.goods_rating || 98,
						detail: data.goods_desc,
						detailUrl: data.xqurl ? this.baseUrl + data.xqurl : '',
						params: data.goods_params || [],
						video: data.video_file || '',
						storeType: data.manufac_type === 1 ? '自营' : '',
						express: data.kuaidi || '免费',
						location: data.dizhi || '',
						memberProfit: data.common || 0,
						seniorProfit: data.senior || 0,
						partnerProfit: data.partner || 0,
						recommendProfit: data.tuijian || 0
					}

					this.isOnSale = data.is_sale === 1
					this.loadGoodsSpec(data.spec_id)

					// 加载评价预览
					this.loadCommentPreview()
				} else {
					uni.showToast({
						title: result.msg || '商品不存在',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			} catch (error) {
				uni.hideLoading()
				console.error('加载商品详情失败:', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			}
		},

		// 加载购物车数量
		async loadCartCount() {
			try {
				const token = getToken()
				if (!token) return

				const result = await api.cartApi.getCartCount()
				if (result.r === 0) {
					this.cartCount = result.data.count || 0
				}
			} catch (error) {
				console.error('获取购物车数量失败:', error)
			}
		},

		// 加载商品规格
		async loadGoodsSpec(specId) {
			try {
				const result = await api.goodsApi.getGoodsSpec({
					goods_id: this.goodsId,
					spec_id: specId
				})
				if (result.r === 0) {
					this.goodsInfo.specs = result.data.lists || []
					this.selectedSpecId = specId

					// 自动选择默认规格
					this.autoSelectDefaultSpecs()
				}
			} catch (error) {
				console.error('获取商品规格:', error)
			}
		},

		// 自动选择默认规格
		autoSelectDefaultSpecs() {
			if (!this.goodsInfo.specs || !this.goodsInfo.specs.length) return

			// 清空之前的选择
			this.selectedSpecs = {}

			// 为每个规格属性选择默认值
			this.goodsInfo.specs.forEach(spec => {
				if (spec.attr_value && spec.attr_value.length > 0) {
					// 优先选择is_default为true的选项，否则选择第一个
					const defaultOption = spec.attr_value.find(option => option.is_default) || spec.attr_value[
						0]
					this.selectedSpecs[spec.attr_name] = defaultOption.option_name
				}
			})

			console.log('自动选择的规格:', this.selectedSpecs)
		},

		// 加载评价预览
		async loadCommentPreview() {
			try {
				const result = await api.goodsApi.getGoodsComment({
					goods_id: this.goodsId,
					type: 0,
					page: 1
				})

				if (result.r === 0) {
					const data = result.data
					this.totalComments = data.all_num || 0

					// 处理评价预览
					this.commentPreview = data.lists.slice(0, 2).map(item => ({
						id: item.id,
						nickname: item.nickname,
						avatar: item.header_img ? this.baseUrl + item.header_img :
							'/static/default-avatar.png',
						rating: item.goods_desc_score,
						content: item.content,
						spec: item.goods_spec,
						images: item.img_lists ? item.img_lists.map(img => this.baseUrl + img) : [],
						reply: item.reply_content
					}))
				}
			} catch (error) {
				console.error('加载评价预览失败:', error)
			}
		},

		// 检查收藏状态
		async checkFavoriteStatus() {
			try {
				const token = getToken()
				if (!token) return

				// 这里需要实现收藏API
				// const result = await api.favoriteApi.checkFavorite({ goods_id: this.goodsId })
				// if (result.r === 0) {
				//     this.isFavorite = result.data.is_favorite || false
				// }
			} catch (error) {
				console.error('检查收藏状态失败:', error)
			}
		},

		// 获取用户信息
		async getUserInfo() {
			try {
				const token = getToken()
				if (!token) return

				const result = await api.userApi.getUserDetail()
				if (result.r === 0) {
					this.userInfo = {
						isPartner: result.data.is_partner === 1,
						isStaff: result.data.is_staff === 1
					}
				}
			} catch (error) {
				console.error('获取用户信息失败:', error)
			}
		},
		// 加载用户身份信息
		async loadUserIdentity() {
			try {
				const res = await api.identityApi.getIdentityInfo()
				if (res.r === 0 && res.data) {
					this.userIdentity = res.data
				}
			} catch (error) {
				console.error('加载身份信息失败:', error)
			}
		},

		// 预览图片
		previewImage(index) {
			const urls = this.goodsInfo.images.map(img => this.baseUrl + img)
			uni.previewImage({
				current: index,
				urls: urls
			})
		},

		// 预览评价图片
		previewCommentImage(images, index) {
			uni.previewImage({
				current: index,
				urls: images
			})
		},

		// 分享商品
		shareGoods() {
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			})
		},

		// 显示规格选择
		showSpecPopup() {
			this.showSpec = true
		},

		// 隐藏规格选择
		hideSpecPopup() {
			this.showSpec = false
		},

		// 选择规格
		selectSpec(specName, option) {
			this.selectedSpecs = {
				...this.selectedSpecs,
				[specName]: option.option_name
			}
		},

		// 减少数量
		decreaseQuantity() {
			if (this.quantity > 1) {
				this.quantity--
			}
		},

		// 增加数量
		increaseQuantity() {
			const maxStock = this.selectedSpec.stock || this.goodsInfo.stock
			if (this.quantity < maxStock) {
				this.quantity++
			} else {
				uni.showToast({
					title: '库存不足',
					icon: 'none'
				})
			}
		},

		// 检查数量
		checkQuantity() {
			const maxStock = this.selectedSpec.stock || this.goodsInfo.stock
			if (this.quantity < 1) {
				this.quantity = 1
			} else if (this.quantity > maxStock) {
				this.quantity = maxStock
				uni.showToast({
					title: '库存不足',
					icon: 'none'
				})
			}
		},

		// 加入购物车
		addToCart() {
			if (!this.isOnSale) {
				uni.showToast({
					title: '商品已下架',
					icon: 'none'
				})
				return
			}
			this.showSpecPopup()
		},

		// 确认加入购物车
		async confirmAddToCart() {
			if (!this.checkSpecSelected()) return

			const token = getToken()
			if (!token) {
				this.showLoginModal()
				return
			}

			try {
				uni.showLoading({
					title: '添加中...'
				})

				const result = await api.cartApi.addToCart({
					goods_id: this.goodsId,
					sepc_id: this.selectedSpecId,
					count: this.quantity
				})

				uni.hideLoading()

				if (result.r === 0) {
					this.hideSpecPopup()
					this.cartCount += this.quantity
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: result.msg || '添加失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.hideLoading()
				console.error('添加购物车失败:', error)
				uni.showToast({
					title: '网络异常，请重试',
					icon: 'none'
				})
			}
		},

		// 立即购买
		buyNow() {
			if (!this.isOnSale) {
				uni.showToast({
					title: '商品已下架',
					icon: 'none'
				})
				return
			}

			const token = getToken()
			if (!token) {
				this.showLoginModal()
				return
			}

			this.showSpecPopup()
		},

		// 确认立即购买
		confirmBuyNow() {
			if (!this.checkSpecSelected()) return

			const token = getToken()
			if (!token) {
				this.showLoginModal()
				return
			}

			this.hideSpecPopup()

			// 跳转到订单确认页面
			uni.navigateTo({
				url: `/pages/order/confirm?spec_id=${this.selectedSpecId}&count=${this.quantity}&source=1&select=1`
			})
		},

		// 显示登录弹窗
		showLoginModal() {
			uni.showModal({
				title: '温馨提示',
				content: '您尚未登录，请先登录',
				confirmText: '确定',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			})
		},

		// 检查规格是否选择完整
		checkSpecSelected() {
			for (let spec of this.goodsInfo.specs) {
				if (!this.selectedSpecs[spec.attr_name]) {
					uni.showToast({
						title: `请选择${spec.attr_name}`,
						icon: 'none'
					})
					return false
				}
			}
			return true
		},

		// 切换导航标签
		switchNavTab(index) {
			console.log('切换导航标签:', index)

			console.log('当前activeNavTab:', this.activeNavTab)
			if (index === 1) {
				uni.navigateTo({
					url: `/pages/public/commonWeb?url=${this.goodsInfo.detailUrl}`
				})
				return
			}
			this.activeNavTab = index
			if (index === 2) {
				this.loadComments(0, 1)
			}
		},

		// 切换评价标签
		switchCommentTab(index) {
			this.activeCommentTab = index
			this.commentPage = 1
			this.currentComments = []
			this.loadComments(index, 1)
		},

		// 加载评价数据
		async loadComments(type, page = 1) {
			try {
				const result = await api.goodsApi.getGoodsComment({
					goods_id: this.goodsId,
					type: type,
					page: page
				})

				if (result.r === 0) {
					const data = result.data

					// 更新评价统计
					this.commentTabs[0].count = data.all_num || 0
					this.commentTabs[1].count = data.good_num || 0
					this.commentTabs[2].count = data.general_num || 0
					this.commentTabs[3].count = data.neg_num || 0
					this.commentTabs[4].count = data.pic_eval_num || 0

					// 处理评价列表
					const comments = data.lists.map(item => ({
						id: item.id,
						nickname: item.nickname,
						avatar: item.header_img ? this.baseUrl + item.header_img :
							'/static/default-avatar.png',
						rating: item.goods_desc_score,
						content: item.content,
						spec: item.goods_spec,
						images: item.img_lists ? item.img_lists.map(img => this.baseUrl + img) : [],
						reply: item.reply_content
					}))

					if (page === 1) {
						this.currentComments = comments
					} else {
						this.currentComments = [...this.currentComments, ...comments]
					}

					this.hasMoreComments = comments.length >= 10
				}
			} catch (error) {
				console.error('加载评价失败:', error)
			}
		},

		// 加载更多评价
		loadMoreComments() {
			if (this.hasMoreComments) {
				this.commentPage++
				this.loadComments(this.activeCommentTab, this.commentPage)
			}
		},

		// 刷新评价
		refreshComments() {
			this.refreshing = true
			this.commentPage = 1
			this.loadComments(this.activeCommentTab, 1).finally(() => {
				this.refreshing = false
			})
		},

		// 轮播图切换
		onSwiperChange(e) {
			this.currentImageIndex = e.detail.current
		},

		// 申请合伙人
		applyPartner() {
			const token = getToken()
			if (!token) {
				this.showLoginModal()
				return
			}
			if (this.userIdentity.is_checked != 1) {
				uni.showModal({
					title: '温馨提示',
					content: '为了保护用户权益和资金安全需要实名认证后才能继续操作',
					confirmText: "去认证",
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: '/pages/identity/realNameAuth'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
				return
			}

			// uni.navigateTo({
			// 	url: '/pages/identity/buyCooperativeIdentity_hhrzz'
			// })
			// const added = item.states == 1 ? 1 : 0
			const added = 0
			uni.navigateTo({
				url: `/pages/identity/buyCooperativeIdentity_hhrzz?added=${added}`
			})
		},

		// 申请云主
		applyStaff() {
			const token = getToken()
			if (!token) {
				this.showLoginModal()
				return
			}

			if (this.userIdentity.is_checked != 1) {
				uni.showModal({
					title: '温馨提示',
					content: '为了保护用户权益和资金安全需要实名认证后才能继续操作',
					confirmText: "去认证",
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: '/pages/identity/realNameAuth'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				return
			}




			uni.navigateTo({
				url: '/pages/identity/staff'
			})
		},

		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 回到首页
		goHome() {
			uni.redirectTo({
				url: '/pages/index/index'
			})
		},

		// 打开客服
		openCustomerService() {
			uni.navigateTo({
				url: '/pages/service/index'
			})
		},

		// 跳转购物车
		goCart() {
			uni.redirectTo({
				url: '/pages/cart/index'
			})
		},

		// 显示更多菜单（已移除首页选项）
		showMoreMenu() {
			uni.showActionSheet({
				itemList: ['搜索'],
				success: (res) => {
					if (res.tapIndex === 0) {
						uni.navigateTo({
							url: '/pages/search/index'
						})
					}
				}
			})
		},

		// 显示产品参数弹窗
		showParamPopup() {
			if (!this.goodsInfo.params || !this.goodsInfo.params.length) {
				this.loadGoodsParams()
			}

			uni.showModal({
				title: '产品参数',
				content: this.goodsInfo.params.map(p => `${p.name}: ${p.value}`).join('\n'),
				showCancel: false
			})
		},

		// 加载商品参数
		async loadGoodsParams() {
			try {
				const result = await api.goodsApi.getGoodsParam({
					goods_id: this.goodsId
				})

				if (result.r === 0) {
					this.goodsInfo.params = result.data.lists || []
				}
			} catch (error) {
				console.error('加载商品参数失败:', error)
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.goods-detail {
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

// 自定义导航栏
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: linear-gradient(135deg, #FF8033 0%, #FF6B35 100%);
}

.custom-navbar .navbar-content {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	position: relative;
}

.custom-navbar .back-btn {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 10;
}

.custom-navbar .navbar-title {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.custom-navbar .navbar-title .title-text {
	font-size: 40rpx;
	font-weight: 600;
	color: #fff;
	letter-spacing: 1rpx;
}

// 导航标签栏
.nav-tabs-bar {
	position: fixed;
	left: 0;
	right: 0;
	height: 88rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 998;
	border-bottom: 2rpx solid #f0f0f0;

	.nav-tab {
		padding: 16rpx 32rpx;
		position: relative;

		&.active {
			.tab-text {
				color: #27B387;
				font-weight: 500;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background-color: #27B387;
			}
		}

		.tab-text {
			font-size: 32rpx;
			color: #333;
		}
	}
}

// 内容容器
.content-container {
	// margin-top 通过动态计算设置
}

// 商品轮播
.goods-swiper {
	position: relative;
	height: 750rpx;
	background-color: #fff;

	.swiper {
		height: 100%;

		.swiper-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.video-container {
			width: 100%;
			height: 100%;

			.goods-video {
				width: 100%;
				height: 100%;
			}
		}
	}

	.image-count {
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 8rpx 16rpx;
		border-radius: 24rpx;

		.count-text {
			font-size: 24rpx;
			color: #fff;
		}
	}
}

// 商品信息
.goods-info {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;

	.store-tag {
		background-color: #27B387;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		.tag-text {
			font-size: 20rpx;
			color: #fff;
		}
	}

	.title-section {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;

		.goods-title {
			flex: 1;
			font-size: 32rpx;
			color: #333;
			line-height: 1.4;
			margin-right: 20rpx;
		}

		.title-actions {
			.action-item {
				padding: 10rpx;
			}
		}
	}

	.price-section {
		margin-bottom: 16rpx;
		position: relative;

		.price-row {
			margin-bottom: 12rpx;

			.current-price {
				display: flex;
				align-items: baseline;

				.price-symbol {
					font-size: 28rpx;
					color: #ff9600;
					font-weight: 500;
				}

				.price-value {
					font-size: 48rpx;
					color: #ff9600;
					font-weight: bold;
				}
			}
		}

		.original-price {
			position: absolute;
			top: 0;
			right: 0;

			.original-text {
				font-size: 28rpx;
				color: #999;
				text-decoration: line-through;
			}
		}

		.hand-price {
			margin-bottom: 12rpx;

			.hand-price-text {
				font-size: 28rpx;
				color: #ff9600;
			}
		}

		.express-row {
			display: flex;
			justify-content: space-between;

			.express-text {
				font-size: 24rpx;
				color: #999;
			}

			.location-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.sales-info {
		display: flex;
		gap: 30rpx;
		margin-bottom: 16rpx;

		.sales-text {
			font-size: 24rpx;
			color: #999;
		}
	}
}

// 服务保障
.service-guarantee {
	// background-color: #fff;
	padding: 0rpx 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.guarantee-box {
		display: flex;
		align-items: center;
	}


	.guarantee-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.guarantee-text {
		font-size: 28rpx;
		color: #333;
	}
}

// 分润信息
.profit-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;

	.profit-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.profit-label {
			width: 120rpx;

			.label-text {
				font-size: 28rpx;
				color: #999;
			}
		}

		.profit-desc {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 20rpx;

			.desc-text {
				font-size: 28rpx;
				color: #333;
			}

			.profit-amount {
				font-size: 28rpx;
				color: #27B387;
				font-weight: 500;
			}

			.apply-btn {
				background-color: #27B387;
				padding: 4rpx 16rpx;
				border-radius: 8rpx;
				display: flex;

				.apply-text {
					font-size: 20rpx;
					color: #fff;
				}
			}
		}
	}

	.profit-recommend {
		.recommend-text {
			font-size: 28rpx;
			color: #666;
		}

		.recommend-amount {
			font-size: 28rpx;
			color: #27B387;
			font-weight: 500;
		}
	}
}

// 规格选择
.spec-section {
	background-color: #fff;
	padding: 30rpx;
	padding-bottom: 20rpx;
	margin-bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.spec-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		.spec-left {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.header-title {
				font-size: 28rpx;
				color: #333;
			}

			.selected-text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.param-text {
		font-size: 28rpx;
		color: #333;
	}
}

.param-section {
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2rpx solid #f0f0f0;
}

.comment-entry {
	background-color: #fff;
	padding: 20rpx 30rpx 30rpx 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.entry-text {
		font-size: 28rpx;
		color: #333;
	}
}

// 评价预览
.comment-preview {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;

	.comment-header {
		margin-bottom: 20rpx;

		.header-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}
	}

	.comment-tags {
		display: flex;
		gap: 16rpx;
		margin-bottom: 30rpx;

		.comment-tag {
			background-color: #f0f0f0;
			padding: 8rpx 16rpx;
			border-radius: 8rpx;

			.tag-text {
				font-size: 20rpx;
				color: #666;
			}
		}
	}

	.see-all-comments {
		text-align: center;
		padding: 20rpx;
		border-top: 2rpx solid #f0f0f0;
		margin-top: 30rpx;

		.see-all-text {
			font-size: 24rpx;
			color: #27B387;
		}
	}
}

// 评价列表
.comments-content {
	background-color: #fff;

	.comment-tabs {
		display: flex;
		border-bottom: 2rpx solid #f0f0f0;

		.comment-tab {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			&.active {
				.tab-text {
					color: #27B387;
					font-weight: 500;
				}

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 4rpx;
					background-color: #27B387;
				}
			}

			.tab-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.comment-scroll {
		height: calc(100vh - 400rpx);
	}
}

// 评价项
.comment-item {
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;

	&:last-child {
		border-bottom: none;
	}

	.comment-user {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		.user-avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.user-name {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.comment-rating {
			display: flex;
			gap: 4rpx;

			.star {
				width: 24rpx;
				height: 24rpx;
				background-color: #f0f0f0;

				&.active {
					background-color: #ffa500;
				}
			}
		}
	}

	.comment-content {
		margin-bottom: 16rpx;

		.comment-text {
			font-size: 28rpx;
			color: #333;
			line-height: 1.4;
		}
	}

	.comment-spec {
		margin-bottom: 16rpx;

		.spec-text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.comment-images {
		display: flex;
		gap: 16rpx;
		margin-bottom: 16rpx;

		.comment-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			object-fit: cover;
		}
	}

	.seller-reply {
		background-color: #f8f8f8;
		padding: 16rpx;
		border-radius: 8rpx;
		position: relative;

		.reply-triangle {
			position: absolute;
			top: -10rpx;
			left: 20rpx;
			width: 0;
			height: 0;
			border-left: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-bottom: 10rpx solid #f8f8f8;
		}

		.reply-text {
			font-size: 24rpx;
			color: #666;
		}
	}
}

// 详情内容
.detail-content {
	background-color: #fff;
	min-height: calc(100vh - 200rpx);

	.detail-wrapper {
		padding: 30rpx;

		// 富文本样式
		:deep(.rich-text) {
			line-height: 1.6;

			img {
				max-width: 100%;
				height: auto;
				display: block;
				margin: 20rpx 0;
			}

			p {
				margin: 20rpx 0;
				font-size: 28rpx;
				color: #333;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				margin: 30rpx 0 20rpx 0;
				color: #333;
				font-weight: 500;
			}

			ul,
			ol {
				margin: 20rpx 0;
				padding-left: 40rpx;
			}

			li {
				margin: 10rpx 0;
				font-size: 28rpx;
				color: #333;
			}

			table {
				width: 100%;
				border-collapse: collapse;
				margin: 30rpx 0;

				th,
				td {
					border: 2rpx solid #ddd;
					padding: 16rpx;
					text-align: left;
					font-size: 28rpx;
				}

				th {
					background-color: #f5f5f5;
					font-weight: 500;
				}
			}
		}
	}

	.no-detail {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;

		.no-detail-text {
			font-size: 28rpx;
			color: #999;
		}
	}
}

// 分润详情
.profit-detail {
	background-color: #f5f5f5;
	min-height: calc(100vh - 200rpx);
	
	.profit-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.profit-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			&:last-of-type {
				margin-bottom: 0;
			}
			
			.profit-label {
				width: 120rpx;
				flex-shrink: 0;
				
				.label-text {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
			
			.profit-desc {
				flex: 1;
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				.desc-text {
					font-size: 28rpx;
					color: #333;
				}
				
				.profit-amount {
					font-size: 28rpx;
					color: #27B387;
					font-weight: 500;
				}
				
				.apply-btn {
					background-color: transparent;
					border: 2rpx solid #27B387;
					padding: 8rpx 24rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: auto;
					
					.apply-text {
						font-size: 24rpx;
						color: #27B387;
					}
				}
			}
		}
		
		.profit-recommend {
			margin-top: 30rpx;
			padding-top: 30rpx;
			border-top: 2rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			gap: 8rpx;
			
			.recommend-text {
				font-size: 28rpx;
				color: #666;
			}
			
			.recommend-amount {
				font-size: 28rpx;
				color: #27B387;
				font-weight: 500;
			}
		}
	}
}

// 无数据
.no-data {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 40rpx;

	.no-data-img {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
	}

	.no-data-text {
		font-size: 28rpx;
		color: #999;
	}
}

// 加载更多
.load-more {
	text-align: center;
	padding: 40rpx;

	.load-text {
		font-size: 24rpx;
		color: #999;
	}
}

// 底部操作栏
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background-color: #fff;
	border-top: 2rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	gap: 20rpx;

	.action-left {
		display: flex;
		gap: 30rpx;

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4rpx;
			position: relative;

			.action-text {
				font-size: 20rpx;
				color: #666;
			}

			.cart-badge {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				min-width: 32rpx;
				height: 32rpx;
				background-color: #ff4757;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.badge-text {
					font-size: 20rpx;
					color: #fff;
					padding: 0 8rpx;
				}
			}
		}
	}

	.action-right {
		flex: 1;
		display: flex;
		gap: 0;

		.add-cart-btn {
			flex: 1;
			height: 80rpx;
			background: #27B387;
			border-radius: 0;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn-text {
				font-size: 28rpx;
				color: #fff;
				font-weight: 500;
			}
		}

		.buy-now-btn {
			flex: 1;
			height: 80rpx;
			background: #ff9800;
			border-radius: 0;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn-text {
				font-size: 28rpx;
				color: #fff;
				font-weight: 500;
			}
		}
	}
}

// 规格弹窗
.spec-popup {
	max-height: 70vh;
	display: flex;
	flex-direction: column;

	.popup-header {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;

		.goods-brief {
			flex: 1;
			display: flex;
			align-items: center;

			.brief-image {
				width: 250rpx;
				height: 250rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
				object-fit: cover;
			}

			.brief-info {
				flex: 1;

				.brief-price {
					font-size: 36rpx;
					color: #ff9800;
					font-weight: bold;
					display: block;
					margin-bottom: 8rpx;
				}

				.brief-stock {
					font-size: 24rpx;
					color: #999;
					display: block;
					margin-bottom: 4rpx;
				}

				.brief-spec {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.close-btn {
			padding: 10rpx;
		}
	}

	.spec-content {
		flex: 1;
		padding: 30rpx;
		overflow-y: auto;

		.spec-group {
			margin-bottom: 40rpx;

			.spec-name {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				display: block;
				margin-bottom: 20rpx;
			}

			.spec-options {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;

				.spec-option {
					padding: 16rpx 24rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: 8rpx;
					background-color: #fff;

					&.active {
						border-color: #ff9800;
						background-color: #fff3e0;

						.option-text {
							color: #ff9800;
						}
					}

					&.disabled {
						border-color: #f0f0f0;
						background-color: #f8f8f8;

						.option-text {
							color: #ccc;
						}
					}

					.option-text {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}

		.quantity-section {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 40rpx;

			.quantity-label {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			.quantity-control {
				display: flex;
				align-items: center;
				border: 2rpx solid #e0e0e0;
				border-radius: 8rpx;
				overflow: hidden;

				.quantity-btn {
					width: 64rpx;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f8f8f8;

					&.disabled {
						background-color: #f0f0f0;
					}
				}

				.quantity-input {
					width: 120rpx;
					height: 64rpx;
					text-align: center;
					border: none;
					font-size: 28rpx;
				}
			}
		}
	}

	.popup-actions {
		padding: 0;
		display: flex;
		gap: 0;

		.popup-btn {
			flex: 1;
			height: 88rpx;
			border-radius: 0;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;

			&.add-cart {
				background: #27B387;
			}

			&.buy-now {
				background: #ff9800;
			}

			.btn-text {
				font-size: 32rpx;
				color: #fff;
				font-weight: 500;
			}
		}
	}
}
</style>